import { createRouter, createWebHistory } from 'vue-router'
import { constantRoutes } from './routers'
import { useUserStore } from '@/stores/userStore'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置NProgress选项
NProgress.configure({ 
  easing: 'ease',  // 动画方式
  speed: 500,      // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3      // 初始化时的最小百分比
})

// 白名单路由 - 不需要登录就可以访问的路由
const whiteList = ['Landing', 'Login', 'Register', 'ForgotPassword']

// createRouter 创建路由实例
// 配置 history 模式
// 1. history模式：createWebHistory     地址栏不带 #
// 2. hash模式：   createWebHashHistory 地址栏带 #
// console.log(import.meta.env.DEV)

// vite 中的环境变量 import.meta.env.BASE_URL  就是 vite.config.js 中的 base 配置项
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), //history模式：createWebHistory     地址栏不带 #
  routes: constantRoutes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 启动进度条
  if (NProgress.isStarted()) {
    NProgress.done()
  }
  NProgress.start()
  const userStore = useUserStore()
  const isLoggedIn = userStore.isLoggedIn

  // 已登录状态下访问登录页，重定向到首页
  if (to.name === 'Login' && isLoggedIn) {
    next({ name: 'Home' })
    return
  }

  // 在白名单中的路由直接放行
  if (whiteList.includes(to.name)) {
    next()
    return
  }

  // 处理无效路由，重定向到404页面
  if (!to.matched.length) {
    next({ name: '404' })
    return
  }

  // 不在白名单中且未登录，重定向到登录页
  if (!isLoggedIn) {
    next({ name: 'Login' })
    return
  }

  // 其他情况放行
  next()
})

// 全局后置守卫
router.afterEach(() => {
  // 结束进度条
  NProgress.done()
})

// 路由错误处理
router.onError(() => {
  // 发生错误时也要结束进度条
  NProgress.done()
})

export default router
